<template>
  <div class="no-result-box">
    <div class="no-result-icon">
      <img src="./no-data.png" alt="" class="imgs">
    </div>
    <p class="text text1">Your available {{title}} will live here.</p>
    <p class="text">You have no available {{title}} yet.</p>
    <button class="btn" @click="cashBackNow">{{footBtn}}</button>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      title: {
        type: String,
        default:'Orders'
      },
      footBtn: {
        type: String,
        default:'Cashback Now!'
      }
    },
    methods:{
      cashBackNow (){
        let url = '/limited-deals'
        if(this.footBtn !== 'Cashback Now!'){
          url = '/new'
        }
        this.$router.push({
          path: url
        });
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .no-result-box
    text-align: center
    width:100%;
    padding-bottom: 30px;
    margin:auto
    .no-result-icon
      padding-top: 9%
      margin-bottom:6%
      .imgs
        width:5rem
        height:5rem
    .text
      font-size: $font-size-medium
      color: #ccc
      line-height:24px
    .text1
      color:#000
      font-size:16px
    .btn
      width:200px
      height:38px
      line-height:38px
      color: #ffffff
      background #1057e7
      border:none
      margin-top:10%
      font-size:14px
      cursor:pointer

</style>
